<template>
         <div id="box">
               <header>
                     <i class="iconfont icon-weibiaoti-- fh" @click="back"></i>
                     <span class="title">借款详情</span>
               </header>
               <h1 style="width:100%;height:1.88rem;"></h1>
               <div class="main">
                  <div class="jdt">
                        <span class="jkje">借款金额</span>
                        <input class="text" type="number" v-model="number" >
                  </div>
                  <div class="xq">
                        <h3>可借金额：{{moneyf}}~{{moneyt}} 元</h3>
                  </div>
                  <nav>
                       <p class="iconfont icon-shijian1 nv">&nbsp;借款期限{{time}}周</p>
                       <p class="iconfont icon-queding nv">&nbsp;分期{{time}}期</p>
                       <p class="iconfont icon-riqi nv">&nbsp;按周还款</p>
                  </nav>
                  <div class="ckxq">
                       <router-link tag="h4" :to="{name:'tenant',params:{id:xid}}">查看产品详情</router-link>&nbsp;&nbsp;<b class="iconfont icon-you"></b>   
                  </div>
               </div>
               <main>
                     <div class="jkyt">
                           <div class="jktitle">
                                <span class="lssx"></span>
                                <h5>借款用途</h5>
                           </div>
                           <ul class="jknav">
                                 <li class="l1 last" @click="l1">购物</li>
                                 <li class="l2 last" @click="l2">旅游</li>
                                 <li class="l3 last" @click="l3">医疗</li>
                           </ul>
                     </div>
                     <div class="ac">
                           <div class="jktitle">
                               <span class="lssx"></span>
                               <h5>认证材料</h5>
                           </div>
                           <ul class="acul">
                                 <li v-for="(index,i) in list" :key="i" :style="index.st">
                                     <i :class="index.cl1"></i>
                                     <span>{{index.title}}</span>
                                     <router-link class="tz" :style="index.ys" :to="{name:index.path,params:{'id':xid}}">{{index.zt}}</router-link>
                                     <b class="iconfont icon-you" :style="index.ys"></b>  
                                 </li>
                           </ul>
                           <!--<div class="rxyx">
                                 <p>以下认证任选一项</p>
                                 <ul class="list">
                                       <router-link :to="{}" tag="li" >
                                                    <i class="iconfont icon-shebaokaihu"></i>
                                                    <span>社保</span>
                                       </router-link>
                                       <router-link :to="{}" tag="li" >
                                                    <i class="iconfont icon-gongjijinchaxun"></i>
                                                    <span>公积金</span>
                                       </router-link>
                                       <router-link :to="{}" tag="li" >
                                                    <i class="iconfont icon-youxiang"></i>
                                                    <span>邮箱</span>
                                       </router-link>
                                       <router-link :to="{}" tag="li" >
                                                    <i class="iconfont icon-taobao"></i>
                                                    <span>淘宝</span>
                                       </router-link>
                                       <router-link :to="{}" tag="li" >
                                                    <i class="iconfont icon-jingdongdaojia"></i>
                                                    <span>京东</span>
                                       </router-link>
                                 </ul>
                           </div>  -->
                     </div>
                     <div class="bottom"></div>
               </main>      
               <button :disabled="btnloading">马上获取额度</button>  
         </div>       
</template>

<script>
import $ from 'jquery'

export default {
       data(){
           return{
               sz:"",
               number:"",
               btnloading:true,
               list:[{title:"联系信息",zt:"未认证",cl1:"iconfont icon-lianxiren",path:"linkman",ys:""},{title:"身份认证",zt:"未认证",ys:"",cl1:"iconfont icon-shenfenzheng1",path:'IDcard'},{title:"单位信息",zt:"未认证",cl1:"iconfont icon-leijianzhucailiaox",ys:"",path:"workaddress"},
               {title:"绑定银行卡",zt:"未认证",cl1:"iconfont icon-shuaqiaqiapianyinhangqia",ys:"",path:'bindbank'},{title:"手机运营商",zt:"未认证",cl1:"iconfont icon-shouji1",ys:"",st:"border-bottom:none",path:'yysrz'}],
               token:"",
               moneyf:"",
               time:"",
               xid:"",
               moneyt:"",
           }
       },
       methods:{
            back(){
               this.$router.push({name:"home"})
           },
           l1(){
              $(".l1").css({"border-bottom":"0.08rem solid #1b88fd","color":"#1b88fd"})
              $(".l2").css({"border":"none","color":"#333333"})
              $(".l3").css({"border":"none","color":"#333333"})
           },
            l2(){
              $(".l1").css({"border":"none","color":"#333333"})
              $(".l2").css({"border-bottom":"0.08rem solid #1b88fd","color":"#1b88fd"})
              $(".l3").css({"border":"none","color":"#333333"})
           },
           l3(){
              $(".l1").css({"border":"none","color":"#333333"})
              $(".l2").css({"border":"none","color":"#333333"})
              $(".l3").css({"border-bottom":"0.08rem solid #1b88fd","color":"#1b88fd"})
           },
           
       },
       mounted(){
       	    var userInfo = JSON.parse(localStorage.getItem('userInfo'))
               if(!userInfo){
                   this.$router.push({name:'login'})
              }
              var id = this.$route.params.cpid
		            this.xid = id 
		            this.$http.get('/api/index/product')
		                .then(res=>{
		                	if(res.data.code=="200"){
		                		  var data = res.data.data          	
		                		  for(let i=0;i<data.length;i++){            		  	 
                		  	  if(data[i].id==id){ 
//              		  	  	 console.log(data[i])
                		  	  	 this.moneyf = data[i].moneyf
                		  	  	 this.moneyt = data[i].moneyt
                		  	  	 this.time = data[i].cycle
                		  	  }
                		  }
                	}
                });  
             this.token = localStorage.getItem('Token')
//           console.log(this.token)
             var qs = require('qs')
             this.$http.post('/api/auth/get_auths',qs.stringify({'token':this.token}))
                 .then(res=>{
//               	   console.log(res)
                       if(res.data.code=="200"){
                             if(res.data.result.contact=="1"){
                                   this.list[0].zt = "已认证"
                                   this.list[0].path = ''
                                   this.list[0].ys = 'color:#ccc'
                             }
                             if(res.data.result.idcard =="1"){
                                   this.list[1].zt = "已认证"
                                   this.list[1].path = ''
                                   this.list[1].ys = 'color:#ccc'
                             }
                             if(res.data.result.work =="1"){
                                   this.list[2].zt = "已认证"
                                   this.list[2].path = ''
                                   this.list[2].ys = 'color:#ccc'
                             }
                             if(res.data.result.bankcard =="1"){
                                   this.list[3].zt = "已认证"
                                   this.list[3].path = ''
                                   this.list[3].ys = 'color:#ccc'
                             }
                             if(res.data.result.phoneinfo =="1"){
                                   this.list[4].zt = "已认证"
                                   this.list[4].path = ''
                                   this.list[4].ys = 'color:#ccc'
                             }
                             if(res.data.result.other =="1"){
                                   this.list[5].zt = "已认证"
                                   this.list[5].path = ''
                                   this.list[5].ys = 'color:#ccc'
                             }
                             
                       }else{
                             
                       }
                 });   
		           
             
       }      
}
</script>

<style lang="less" scoped>
       /**{ touch-action: none; }*/
      #box{
               width:100%;
           }
         header{
               position:fixed;
               top:0;
               width:100%;
               height:1.88rem;
               display:flex;
               position: fixed;
               top:0;
                z-index:100;
               background: #0eafe7; /* Old browsers */
                  background: -moz-linear-gradient(left, #0eafe7 0%, #159cf2 100%, #159cf2 100%, #1b88fd 100%, #1b88fd 100%); /* FF3.6-15 */
                  background: -webkit-linear-gradient(left, #0eafe7 0%,#159cf2 100%,#159cf2 100%,#1b88fd 100%,#1b88fd 100%); /* Chrome10-25,Safari5.1-6 */
                  background: linear-gradient(to right, #0eafe7 0%,#159cf2 100%,#159cf2 100%,#1b88fd 100%,#1b88fd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
                  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0eafe7', endColorstr='#1b88fd',GradientType=1 ); /* IE6-9 */
         }
         .fh{
             width:2.1rem;
             line-height:1.88rem;
             text-align:center;
             z-index:100; 
             color:#fff;
             font-size:0.76rem;  
         }
         .title{
               font-size:0.76rem;
               line-height:1.88rem;
               text-align:center;
               color:#fff;
               letter-spacing:0.02rem;
               position: absolute;
               left:0;
               right:0;
               margin:0 auto;
         }
         .main{
               width:100%;
               background: #0eafe7; /* Old browsers */
                  background: -moz-linear-gradient(left, #0eafe7 0%, #159cf2 100%, #159cf2 100%, #1b88fd 100%, #1b88fd 100%); /* FF3.6-15 */
                  background: -webkit-linear-gradient(left, #0eafe7 0%,#159cf2 100%,#159cf2 100%,#1b88fd 100%,#1b88fd 100%); /* Chrome10-25,Safari5.1-6 */
                  background: linear-gradient(to right, #0eafe7 0%,#159cf2 100%,#159cf2 100%,#1b88fd 100%,#1b88fd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
                  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0eafe7', endColorstr='#1b88fd',GradientType=1 ); /* IE6-9 */
         }
         .jdt{
               width:100%;
               display:flex;
               padding-top:1.5rem;
               justify-content:center;
               margin-bottom:1rem;
         }
         .text{
               width:60%;
               height:1.6rem;
               border:none;
               border-radius:0.2rem;
         }
         .jkje{
               line-height:1.6rem;
               margin-right:5%;
               color:#fff;
         }
         .xq{
               display:flex;
               margin-bottom:1rem;
         }
         h3{
               font-size:0.7rem;
               color:#fff;
               padding-left:10%;
         }
         nav{  
               display: flex;
               justify-content:space-around; 
               width:90%;
               height: 2rem;
               border-bottom:0.02rem solid #62bff6;
               position: relative;
               left:0;
               right:0;
               margin: 0 auto;
               line-height:2rem;
         }
         .nv{
              color:#fbfeff;
              font-size:0.5rem;
         }
         .ckxq{
               width:100%;
               height:1.96rem;
               color:#fff;
               display:flex;
               justify-content:center;
         }
         h4{
               font-weight:500;
               font-size:0.56rem;
               line-height:1.96rem;
         }
         b{
               line-height:2rem;
         }
         button{
               width:100%;
               height:1.76rem;
               background:#bababa;
               color:#fff;
               font-size:0.66rem;
               position:fixed;
               bottom:0;
               letter-spacing:0.03rem;
               font-weight:600;
               border:none;
                &:disabled{
                  background-color: #bababa;
                  opacity:1; 
                  }
         }
         main{
               width:100%;
               background:#f5f5f5;
               padding-top:0.4rem;
         }
         .jkyt{
               width:90%;
               height:4.6rem;
               background:#fff;
               border:0.02rem solid #f1f1f1;
               position: relative;
               display:flex;
               flex-direction:column;
               left:0;
               right:0;
               margin:0 auto;
               border-radius:0.2rem;
               margin-bottom:0.8rem;
         }
         .jktitle{
               width:90%;
               height:2.08rem;
               display:flex;
               position: relative;
               left:0;
               right:0;
               margin:0 auto;
         }
         .lssx{
               width:0.16rem;
               height:0.68rem;
               position: relative;
               top:0;
               bottom:0;
               margin: auto 0;
               border-radius:0.08rem;
               background: #1b88fd; /* Old browsers */
                  background: -moz-linear-gradient(top, #1b88fd 0%, #159cf2 100%, #159cf2 100%, #3294fd 100%, #1b88fd 100%); /* FF3.6-15 */
                  background: -webkit-linear-gradient(top, #1b88fd 0%,#159cf2 100%,#159cf2 100%,#3294fd 100%,#1b88fd 100%); /* Chrome10-25,Safari5.1-6 */
                  background: linear-gradient(to bottom, #1b88fd 0%,#159cf2 100%,#159cf2 100%,#3294fd 100%,#1b88fd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
                  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1b88fd', endColorstr='#1b88fd',GradientType=0 ); /* IE6-9 */
         }
         h5{
               line-height:2.08rem;
               color:#333333;
               font-size:0.58rem;
               font-weight:600;
               margin-left:0.4rem;
         }
         .jknav{
               width:90%;
               flex:1;
               position: relative;
               left:0;
               right:0;
               margin:0 auto;
               display:flex;
               justify-content:space-around;
               .last{
                     width:33%;
                     height:1.8rem;
                     text-align:center;
                     line-height:1.8rem;
                     font-size:0.5rem;
               }
         }
         .l1{
               border-bottom:0.08rem solid #1b88fd;
               color:#1b88fd;
         }
         .ac{
               width:90%;
               display:flex;
               flex-direction:column;
               /*height:;19.1rem*/
               height:12.1rem;
               background:#fff;
               border-radius:0.2rem;
               position: relative;
               left:0;
               right:0;
               margin:0 auto;
               border:0.02rem solid #f1f1f1;
         }
         .bottom{
              width:100%;
              height:2.16rem;
         } 
         .acul{
               width:90%;
               background:#fff;
               position:relative;
               left:0;
               right:0;
               margin:0 auto;
                  li{
                        display:flex;
                        position: relative;
                        border-bottom:0.02rem solid #dddddd;
                        height:2rem;
                        line-height:2rem;
                        padding-left:2%;
                        i{
                              color:#00c3f3;
                              margin-right:0.45rem;
                        }
                        span{
                              color:#333333;
                              font-size:0.54rem;
                        }
                      .tz{
                            color:#00c3f3;
                            position:absolute;
                            right:12%;
                      }
                      b{
                            position:absolute;
                            right:7%;
                            font-size:0.48rem;
                            color:#00c3f3;
                      }
                  }
         }
         .rxyx{
               width:90%;
               flex:1;
               position: relative;
               display:flex;
               flex-direction:column;
               left:0;
               right:0;
               margin:0 auto;
                    p{
                          width:100%;
                          height:2rem;
                          padding-left:2%;
                          line-height:2rem;
                          color:#757575;
                          font-size:0.5rem;
                    }
                    .list{
                        width:100%;
                        flex:1;
                        display:flex;
                        padding-top:0.2rem;
                           li{
                                 display:flex;
                                 flex-direction:column;
                                 width:20%;
                                 text-align:center;
                                     i{
                                           margin-bottom:0.3rem;
                                           color:#00c3f3;
                                     }
                                     span{
                                           font-size:0.48rem;
                                           color:#333333;
                                     }
                           }
                    }
         }
</style>

